<template>
  <div class="app-container">

    <el-form :inline="true" class="demo-form-inline">
      <el-upload
        action="#"
        class="upload-demo"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handleUploadSuccess"
        :file-list="fileList"
        :http-request="uploadFile"
        multiple
        :limit="100"
      >
        <el-button size="small" type="primary">点击上传视频文件</el-button>
        <div slot="tip" class="el-upload__tip">类型为视频文件，大小不超过200MB</div>
      </el-upload>
      <br>
      <el-form-item label="通过链接添加视频">
        <el-input v-model="newVideo" placeholder="视频链接" @keyup.enter.native="handlePostVideoByUrl()" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlePostVideoByUrl()">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" style="width: 100%">
      <el-table-column label="封面" width="120">
        <template slot-scope="scope">

          <el-upload
            class="cover-uploader"
            action="#"
            :data="currentItemData(scope.row.id)"
            :show-file-list="false"
            :on-success="handleCoverSuccess"
            :before-upload="beforeCoverUpload"
            :http-request="uploadCover"
          >
            <img v-if="scope.row.coverUrl" :src="scope.row.coverUrl+'?x-oss-process=image/resize,l_120'" class="cover">
            <i v-else class="el-icon-plus cover-uploader-icon" />
          </el-upload>
        </template>
      </el-table-column>

      <el-table-column label="链接" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 8px">{{ scope.row.url }}</span>
        </template>
      </el-table-column>

      <el-table-column label="文件大小" width="100" prop="state">
        <template slot-scope="scope">
          <span style="margin-left: 8px">{{ convertFileSize(scope.row.size) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建日期" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.createdDate }}</span>
        </template>
      </el-table-column>

      <el-table-column label="名称" min-width="120">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" style="margin-left: 8px" class="edit-input" size="mini" placeholder="名称" @blur="handleEditName(scope.$index, scope.row)" @keyup.enter.native="handleEditName(scope.$index, scope.row)" />
        </template>
      </el-table-column>

      <el-table-column label="作者" min-width="90">
        <template slot-scope="scope">
          <el-input v-model="scope.row.author" style="margin-left: 8px" class="edit-input" size="mini" placeholder="作者" @blur="handleEditAuthor(scope.$index, scope.row)" @keyup.enter.native="handleEditAuthor(scope.$index, scope.row)" />
        </template>
      </el-table-column>

      <el-table-column label="简介" min-width="120">
        <template slot-scope="scope">
          <el-input v-model="scope.row.desc" style="margin-left: 8px" class="edit-input" size="mini" placeholder="简介" @blur="handleEditDesc(scope.$index, scope.row)" @keyup.enter.native="handleEditDesc(scope.$index, scope.row)" />
        </template>
      </el-table-column>

      <el-table-column label="分类" min-width="120">
        <template slot-scope="scope">
          <el-select v-model="scope.row.catalog" size="mini" clearable placeholder="请选择" @change="handleEditCatalog(scope.$index, scope.row)">
            <el-option
              v-for="item in catalogList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="90">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
// import { getList, deleteItem, uploadItem, updateNameById, updateAuthorById, updateDescById, updateCoverById } from '@/api/video'
import * as Api from '@/api/video'
import * as Tool from '@/utils/tool'
import { getList as catalogGetList } from '@/api/catalog'

export default {
  data() {
    return {
      list: null,
      newVideo: null,
      count: null,
      belong: this.$route.meta.belong,
      catalogList: [],
      convertFileSize: Tool.convertFileSize,
      fileList: [],
      listLoading: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      Api.getList().then(response => {
        // console.log(response.data.rows)
        this.list = response.data.rows
        this.list.forEach(item => {
          item.createdDate = Tool.convertUtc(item.createdAt)
        })

        this.count = response.data.count
        this.listLoading = false
      })
      catalogGetList(this.belong).then(response => {
        this.catalogList = response.data.rows
      })
    },
    handleUploadSuccess() {
      this.fetchData()
    },
    handleDelete(index, row) {
      const _this = this
      console.log('delete: ' + row.id)
      Api.deleteItem(row.id).then(response => {
        _this.fetchData()
      })
    },
    uploadFile(param) {
      const form = new FormData()
      form.append('file', param.file)
      Api.uploadItem(form).then(() => {
        this.handleUploadSuccess()
      })
    },
    handlePostVideoByUrl() {
      Api.uploadItemByUrl(this.newVideo).then(response => {
        this.newVideo = null
        this.handleUploadSuccess()
      })
    },
    handleEditName(index, row) {
      Api.updateNameById(row.id, { video: { name: row.name }}).then(response => {
      })
    },
    handleEditAuthor(index, row) {
      Api.updateAuthorById(row.id, { video: { author: row.author }}).then(response => {
      })
    },
    handleEditDesc(index, row) {
      Api.updateDescById(row.id, { video: { desc: row.desc }}).then(response => {
      })
    },
    handleEditCatalog(index, row) {
      Api.updateCatalogById(row.id, { video: { catalog: row.catalog }}).then(response => {
      })
    },
    handleCoverSuccess() {
      console.log('handleCoverSuccess')
      this.fetchData()
    },
    beforeCoverUpload(id) {
      console.log('beforeCoverUpload')
    },
    currentItemData(id) {
      return { id: id }
    },
    uploadCover(param) {
      console.log('uploadCover')
      const form = new FormData()
      form.append('file', param.file)
      Api.updateCoverById(param.data.id, form).then(() => {
        this.handleCoverSuccess()
      })
    },

    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    }

  }
}
</script>

<style lang="less" scoped>
.preview-img{
    max-width: 120px;
    max-height: 120px;
}

.cover-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .el-upload:hover {
    border-color: #409EFF;
  }

}
.cover-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.cover {
  max-width: 120px;
  max-height: 120px;
  display: block;
}
</style>
